import React, { Component } from 'react';
import './border.css'
class Border extends Component<{ children?: React.ReactNode, style?: React.CSSProperties | null, className?: string, color?: [string, string] }> {
 private styles: React.CSSProperties
 private className: string
 private border: [string, string, string, string]
 private children: React.ReactNode
 private color: [string, string]
 constructor(props: { children?: React.ReactNode, style?: React.CSSProperties, className?: string, color?: [string, string] }) {
  super(props)
  this.styles = props.style || {}
  this.className = props.className || ''
  this.border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
  this.color = props.color || ['#4fd2dd', '#235fa7']
  this.children = props.children
 }
 render() {
  return (
   <div className={this.className ? this.className + ' dv-border-box' : 'dv-border-box'} style={this.styles}>
    {this.border.map(borderName => (
     <svg
      width='150px'
      height='150px'
      key={borderName}
      className={`${borderName} border`}
     >
      <polygon
       fill={this.color[0]}
       points='6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63'
      >
       <animate
        attributeName='fill'
        values={`${this.color[0]};${this.color[1]};${this.color[0]}`}
        dur='0.5s'
        begin='0s'
        repeatCount='indefinite'
       />
      </polygon>
      <polygon
       fill={this.color[1]}
       points='27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8'
      >
       <animate
        attributeName='fill'
        values={`${this.color[1]};${this.color[0]};${this.color[1]}`}
        dur='0.5s'
        begin='0s'
        repeatCount='indefinite'
       />
      </polygon>
      <polygon
       fill={this.color[0]}
       points='9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54'
      >
       <animate
        attributeName='fill'
        values={`${this.color[0]};${this.color[1]};transparent`}
        dur='1s'
        begin='0s'
        repeatCount='indefinite'
       />
      </polygon>
     </svg>
    ))}
    <div className="content-box">{this.children}</div>
   </div>
  )
 }
}

export default Border
